<!--
 * @Author: zt0233
 * @Date: 2022-03-01 11:17:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:50:18
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\center-map.vue
-->
<template>
  <div class="centermap">
    <div class="maptitle">
      <div class="zuo"></div>
      <span class="titletext">{{ maptitle }}</span>
      <div class="you"></div>
    </div>
    <div class="mapwrap">
      <dv-border-box-13>
<!--        <div class="quanguo" @click="getData('china')" v-if="code !== 'china'">-->
<!--          中国-->
<!--        </div>-->

        <Echart id="CenterMap" :options="options" ref="CenterMap" />
      </dv-border-box-13>
    </div>
  </div>
</template>

<script>

import * as echarts from "echarts";
import { GETNOBASE } from "api";
// 导入模拟数据
import { chinaMapData, hebeiMapData } from '@/mock/mockData.js';
export default {
  data() {
    return {
      maptitle: "设备分布图",
      options: {},
      code: "china", //china 代表中国 其他地市是行政编码
      echartBindClick: false,
      isSouthChinaSea: false, //是否要展示南海群岛  修改此值请刷新页面
    };
  },
  created() {},
  mounted() {
    this.getGeojson(); // 直接加载唐山市地图
  },
  methods: {
    async getGeojson() {
      try {
        // 1. 使用fetch加载本地JSON文件，避免使用API请求
        const response = await fetch('./map-geojson/130200.json');
        const mapjson = await response.json();

        // 2. 注册地图（仅一次）
        echarts.registerMap('唐山市', mapjson);

        // 3. 获取中心点
        let cityCenter = {};
        mapjson.features.forEach(item => {
          cityCenter[item.properties.name] =
              item.properties.centroid || item.properties.center;
        });

        // 4. 使用模拟数据
        // 从hebeiMapData中提取唐山市的数据
        const tangshanData = hebeiMapData.data.dataList.find(item => item.name === '唐山市');
        const totalValue = tangshanData ? tangshanData.value : 0;
        
        // 模拟区县数据分布
        const districts = ['路南区', '路北区', '开平区', '丰南区', '丰润区', '古冶区', '曹妃甸区', '滦南县'];
        const mydata = districts.map(district => {
          // 随机分配总值的一部分给各区县
          const value = Math.floor(totalValue * (0.05 + Math.random() * 0.15));
          return { name: district, value };
        });

        // 5. 构造散点坐标数据
        let data2 = [];
        mydata.forEach(item => {
          if (cityCenter[item.name]) {
            data2.push({
              name: item.name,
              value: cityCenter[item.name].concat(item.value),
            });
          }
        });

        // 6. 初始化图表
        this.init(mydata, data2);
      } catch (error) {
        console.error('加载地图失败:', error);
      }
    },
    init(data, data2) {
      let option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          show: true,
          formatter: function (params) {
            return params.name + "：" + ((params.data && params.data.value) ? params.data.value : 0);
          },
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        visualMap: {
          left: 20,
          bottom: 20,
          pieces: [
            {gte: 1000, label: "1000个以上"},
            {gte: 600, lte: 999, label: "600-999个"},
            {gte: 200, lte: 599, label: "200-599个"},
            {gte: 50, lte: 199, label: "50-199个"},
            {gte: 10, lte: 49, label: "10-49个"},
            {lte: 9, label: "1-9个"},
          ],
          inRange: {
            color: ["#c3d7df", "#5cb3cc", "#8abcd1", "#66a9c9", "#2f90b9", "#1781b5"],
          },
          textStyle: {
            color: "#fff",
          },
        },
        geo: {
          map: '唐山市',
          roam: false,
          zoom: 1.05,
          top: 45,
          show: false,
        },
        series: [
          {
            name: "MAP",
            type: "map",
            map: '唐山市',

            data: data,
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {offset: 0, color: "rgba(147, 235, 248, 0)"},
                  {offset: 1, color: "rgba(147, 235, 248, .2)"}
                ]
              },
              borderColor: "rgba(147, 235, 248, .8)",
              borderWidth: 1,
              shadowColor: "rgba(128, 217, 248, .3)",
              shadowBlur: 10,
            },
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            symbolSize: 4,
            rippleEffect: {
              scale: 6,
              color: "rgba(255,255,255, 1)",
              brushType: "fill",
            },
            label: {
              show: true,
              position: "bottom",
              color: "#FFF",
              formatter: (param) => param.name.slice(0, 2)
            },
            itemStyle: {
              color: "rgba(255,255,255,1)"
            },
            data: data2,
          },
        ]
      };

      this.options = option;
    }
  },

};
</script>
<style lang="scss" scoped>
.centermap {
  margin-bottom: 30px;

  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("../../assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("../../assets/img/xieyou.png") no-repeat;
    }
  }

  .mapwrap {
    height: 548px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4);
    }
  }
}
</style>
